<template>
	<el-row style="margin: 2vh 8vw;">
		<el-row style="margin: 20px 0;">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item><a href="/">个人中心</a></el-breadcrumb-item>
			</el-breadcrumb>
		</el-row>
		<el-row>
			<el-tabs tab-position="left">
				
				<el-tab-pane v-loading="loading" label="个人中心">
					<el-tabs type="border-card">
						<el-tab-pane class="my_list" label="个人资料">
							<el-row type="flex">
								<div>
									Name:
								</div>
								<div>
									{{user.name}}
								</div>
							</el-row>
							<el-row type="flex">
								<div>
									PhoneNum:
								</div>
								<div>
									{{user.phonenum}}
								</div>
							</el-row>
							<el-row type="flex">
								<div>
									Address:
								</div>
								<div>
									{{user.address}}
								</div>
							</el-row>
							<el-row type="flex">
								<div>
									Account:
								</div>
								<div>
									{{user.account}}
								</div>
							</el-row>
						</el-tab-pane>
					</el-tabs>
				</el-tab-pane>
				<el-tab-pane v-loading="loading" label="信息修改">
					<el-tabs type="border-card">
						<el-tab-pane label="信息修改">
							<el-row>
								<el-col :span="10">
									<el-form ref="form" :model="user_form" label-width="80px">
										<el-form-item label="Name">
											<el-input v-model="user_form.name"></el-input>
										</el-form-item>
										<el-form-item label="PhonePum">
											<el-input v-model="user_form.phonenum"></el-input>
										</el-form-item>
										<el-form-item label="Address">
											<el-input v-model="user_form.address"></el-input>
										</el-form-item>
										<el-form-item>
											<el-button type="primary" @click="onSubmit">修改</el-button>
										</el-form-item>
									</el-form>
								</el-col>
							</el-row>
						</el-tab-pane>
					</el-tabs>
				</el-tab-pane>
				<el-tab-pane v-loading="loading" label="正在参与的订单">
					<el-tabs @tab-click='OrderManagement' type="border-card">
						<el-tab-pane label="正在参与的订单">
							<el-empty v-if="!order_form.in.length" description="没有订单"></el-empty>
							<el-table v-if="order_form.in.length" :data="order_form.in" border style="width: 100%">
								<el-table-column prop="name" label="拍品名称" width="180">
								</el-table-column>
								<el-table-column prop="time" label="竞拍时间" width="180">
								</el-table-column>
								<el-table-column prop="pro" label="当前金额">
								</el-table-column>
								<el-table-column prop="pro" label="出价金额">
								</el-table-column>
								<el-table-column label="操作">
									<template slot-scope="scope">
										<span style="margin-right: 10px;">
											<el-button @click="RaisePrice(scope.row)" size="mini" type="success" round>
												加价</el-button>
										</span>
										<span>
											<el-button @click="CheckRow(scope.row)" size="mini" type="primary" round>查看
											</el-button>
										</span>
									</template>
								</el-table-column>
							</el-table>
						</el-tab-pane>
					</el-tabs>
				</el-tab-pane>
				<el-tab-pane v-loading="loading" label="待付拍品">
					<el-tabs @tab-click='OrderManagement' type="border-card">
						<el-tab-pane label="待付拍品">
							<el-empty v-if="!order_form.or.length" description="没有可支付订单"></el-empty>
							<el-table v-if="order_form.or.length" :data="order_form.or" border style="width: 100%">
								<el-table-column prop="name" label="拍品名称" width="180">
								</el-table-column>
								<el-table-column prop="time" label="竞拍时间" width="180">
								</el-table-column>
								<el-table-column prop="pro" label="拍卖号">
								</el-table-column>
								<el-table-column prop="pro" label="当前金额">
								</el-table-column>
								<el-table-column prop="pro" label="出价金额">
								</el-table-column>
								<el-table-column label="操作">
									<template slot-scope="scope">
										<span style="margin-right: 10px;">
											<el-button @click="Payment(scope.row)" size="mini" type="success" round>支付
											</el-button>
										</span>
									</template>
								</el-table-column>
							</el-table>
						</el-tab-pane>
					</el-tabs>
				</el-tab-pane>
				<el-tab-pane v-loading="loading" label="完成拍品">
					<el-tabs @tab-click='OrderManagement' type="border-card">
						<el-tab-pane label="完成拍品">
							<el-empty v-if="!order_form.ed.length" description="没有完成后的订单"></el-empty>
							<el-table v-if="order_form.ed.length" :data="order_form.ed" border style="width: 100%">
								<el-table-column prop="name" label="拍品名称" width="180">
								</el-table-column>
								<el-table-column prop="time" label="竞拍时间" width="180">
								</el-table-column>
								<el-table-column prop="pro" label="出价金额">
								</el-table-column>
								<el-table-column prop="pro" label="拍卖号">
								</el-table-column>
							</el-table>
						</el-tab-pane>
					</el-tabs>
				</el-tab-pane>
				
				<el-tab-pane v-loading="loading" label="上架拍卖品">
					<el-tabs @tab-click='OnTheShelf' type="border-card">
						<el-tab-pane label="上架拍卖品">
							<el-empty v-if="!putaway_form.sub.length" description="没有上架的拍卖品">
								<el-button @click="dialogVisible = true" type="primary">现在添加</el-button>
							</el-empty>
							<el-row v-if="putaway_form.sub.length" style="margin-bottom: 20px;">
								<span style="margin-right: 20px;">
									<el-button @click="dialogVisible = true" type="primary" round>添加</el-button>
								</span>
							</el-row>
							<el-row>
								<el-table v-if="putaway_form.sub.length" :data="putaway_form.sub" border
									style="width: 100%">

									<el-table-column type="expand">
										<template slot-scope="props">
											<el-form label-position="left" class="demo-table-expand">
												<el-form-item label="拍卖品名称">
													123
												</el-form-item>
												<div>
													<div>拍卖品描述</div>
													<div v-html="props.row.content"></div>
												</div>
											</el-form>
										</template>
									</el-table-column>

									<el-table-column prop="name" label="拍卖品名称" width="180">
									</el-table-column>
									<el-table-column prop="address" label="拍卖品初始价格" width="180">
									</el-table-column>
									<el-table-column prop="address" label="拍卖品涨额" width="180">
									</el-table-column>
									<el-table-column prop="address" label="拍卖品类型" width="180">
									</el-table-column>
									<el-table-column prop="address" label="上架时间" width="180">
									</el-table-column>
									<el-table-column prop="address" label="修改时间" width="180">
									</el-table-column>
									<el-table-column label="操作" width="180">
										<template slot-scope="scope">
											<span style="margin-right: 10px;">
												<el-button type="success" round>修改</el-button>
											</span>
											<span>
												<el-button type="danger" round>删除</el-button>
											</span>
										</template>
									</el-table-column>
								</el-table>
							</el-row>
						</el-tab-pane>
					</el-tabs>
				</el-tab-pane>
				<el-tab-pane v-loading="loading" label="已上架拍品">
					<el-tabs @tab-click='OnTheShelf' type="border-card">
						<el-tab-pane label="已上架拍品">
							<el-empty v-if="!putaway_form.in.length" description="目前无开拍的拍品,请联系管理员">
							</el-empty>
							<el-row>
								<el-table v-if="putaway_form.in.length" :data="putaway_form.in" border
									style="width: 100%">
									<el-table-column type="expand">
										<template slot-scope="props">
											<el-form label-position="left" class="demo-table-expand">
												<el-form-item label="拍卖品名称">
													123
												</el-form-item>
												<div>
													<div>拍卖品描述</div>
													<div v-html="props.row.content"></div>
												</div>
											</el-form>
										</template>
									</el-table-column>
									<el-table-column prop="name" label="拍卖品名称" width="180">
									</el-table-column>
									<el-table-column prop="address" label="拍卖品初始价格" width="180">
									</el-table-column>
									<el-table-column prop="address" label="拍卖品涨额" width="180">
									</el-table-column>
									<el-table-column prop="address" label="拍卖品类型" width="180">
									</el-table-column>
									<el-table-column prop="address" label="结束拍卖时间" width="180">
									</el-table-column>
									<el-table-column prop="address" label="上架时间" width="180">
									</el-table-column>
									<el-table-column prop="address" label="修改时间" width="180">
									</el-table-column>
								</el-table>
							</el-row>
						</el-tab-pane>
					</el-tabs>
				</el-tab-pane>
				<el-tab-pane v-loading="loading" label="已拍成功拍品">
					<el-tabs @tab-click='OnTheShelf' type="border-card">
						<el-tab-pane label="已拍成功拍品">
							<el-empty v-if="!putaway_form.ed.length" description="目前无完成的拍品">
				
							</el-empty>
							<el-row>
								<el-table v-if="putaway_form.ed.length" :data="putaway_form.ed" border
									style="width: 100%">
									<el-table-column type="expand">
										<template slot-scope="props">
											<el-form label-position="left" class="demo-table-expand">
												<el-form-item label="拍卖品名称">
													123
												</el-form-item>
												<div>
													<div>拍卖品描述</div>
													<div v-html="props.row.content"></div>
												</div>
											</el-form>
										</template>
									</el-table-column>
									<el-table-column prop="name" label="拍卖品名称" width="180">
									</el-table-column>
									<el-table-column prop="address" label="拍卖品初始价格" width="180">
									</el-table-column>
									<el-table-column prop="address" label="拍卖品涨额" width="180">
									</el-table-column>
									<el-table-column prop="address" label="拍卖品类型" width="180">
									</el-table-column>
									<el-table-column prop="address" label="结束拍卖时间" width="180">
									</el-table-column>
									<el-table-column prop="address" label="上架时间" width="180">
									</el-table-column>
									<el-table-column prop="address" label="修改时间" width="180">
									</el-table-column>
								</el-table>
							</el-row>
						</el-tab-pane>
					</el-tabs>
				</el-tab-pane>
			</el-tabs>
		</el-row>

		<el-dialog title="提示" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
			<el-form ref="form" :model="sub_form" label-width="100px">
				<el-form-item label="拍卖品名称">
					<el-input v-model="sub_form.name"></el-input>
				</el-form-item>
				<el-form-item label="拍卖品初始价格">
					<el-input v-model="sub_form.price"></el-input>
				</el-form-item>
				<el-form-item label="拍卖品涨额">
					<el-input v-model="sub_form.subprice"></el-input>
				</el-form-item>
				<el-form-item label="拍卖品类型">
					<el-input v-model="sub_form.Description"></el-input>
				</el-form-item>
				<el-form-item label="拍卖品介绍">
					<RichText v-model="sub_form.content"></RichText>
				</el-form-item>

			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="Sub_Click">确 定</el-button>
			</span>
		</el-dialog>
	</el-row>
</template>

<script>
	import RichText from '@/components/RichText/RichText.vue'
	export default {
		components: {
			RichText
		},
		data() {
			return {
				
				dialogVisible: false, //对话框控制

				loading: false,
				user: { //个人信息
					name: '姓名',
					phonenum: '12345123',
					address: '地址',
					account: '账户'
				},
				order_form: { // 订单
					in: [ //正在进行的订单
						{
							id: 1
						},
					],
					or: [ // 待付款的订单
						{
							id: 1
						},
					],
					ed: [ // 已经完成的订单
						{},
					],
				},
				putaway_form: { // 上架表单
					sub: [{
						id: 1,
						content: `<h1>Heading</h1><p>This Editor is awesome!</p>`,
					}],
					in: [],
					ed: []
				},
				user_form: { //修改个人信息表单
					name: '',
					phonenum: '',
					address: '',
				},
				sub_form: {
					content: `<h1>Heading</h1><p>This Editor is awesome!</p>`,
				}
			}
		},
		created() {
			
		},
		methods: {
			
			OnTheShelf(res) {
				switch (res.index) {
					case '0':
						this.loading = true
						setTimeout(_ => {
							this.loading = false
						}, 300)
						break
					case '1':
						this.loading = true
						setTimeout(_ => {
							this.loading = false
						}, 300)
						break
					case '2':
						this.loading = true
						setTimeout(_ => {
							this.loading = false
						}, 300)
						break
				}
			},
			OrderManagement(res) { //订单管理中的状态切换 用于获取请求数据
				switch (res.index) {
					case '0':
						this.loading = true
						setTimeout(_ => {
							this.loading = false
						}, 300)
						break
					case '1':
						this.loading = true
						setTimeout(_ => {
							this.loading = false
						}, 300)
						break
					case '2':
						this.loading = true
						setTimeout(_ => {
							this.loading = false
						}, 300)
						break
				}
			},

			Sub_Click() { // 表单提交按钮
				this.dialogVisible = false
				console.log(this.sub_form.content);
			},

			// 对话框 上
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			//对话框 下

			onSubmit() { //修改个人信息
				console.log(this.user_form);
				this.loading = true
				setTimeout(() => {
					this.loading = false
					this.$message({
						message: '修改成功',
						duration: 1000,
						type: 'success'
					});
				}, 300)
			},
			Payment(res) { //支付按钮
				this.loading = true
				setTimeout(() => {
					this.loading = false
					this.$message({
						message: '支付成功',
						duration: 1000,
						type: 'success'
					});
				}, 300)
			},
			RaisePrice(res) { //加价按钮
				this.loading = true
				setTimeout(() => {
					this.loading = false
					this.$message({
						message: '追加拍卖价格成功',
						duration: 1000,
						type: 'success'
					});
				}, 300)
			},
			CheckRow(res) { //查看正在拍卖的按钮
				this.$router.push("/ListItem/ParticularIng?id=" + res.id)
			}
		}
	}
</script>


<style scoped lang="scss">
	@import 'Index.scss'
</style>
